<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/CSS/search_page.css">
</head>
<body>
<div class="content">
    <!-- 侧边栏部分 -->
    <div class="left_bar">
        <!-- 图标部分 -->
        <div class="logo">
            <div class="l_img">
                <h1>BOKEY</h1>
                <p>欢迎!您还没有登录</p>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 选项卡部分(选择二合一模块的组件) -->
        <ul class="select">
            <li >
                <p></p>
                <h4>主页</h4>
            </li>
            <li>
                <p></p>
                <h4>笔记上传</h4>
            </li>
            <li class="selecting">
                <p></p>
                <h4>搜索笔记</h4>
            </li>
            <li>
                <p></p>
                <h4>我的笔记</h4>
            </li>
        </ul>
        <div class="line"></div>
    </div>
    <!-- 顶部部分 -->
    <div class="top">
        <a href="${pageContext.request.contextPath}/login">注册/登录</a>
        <p>在分享笔记前，记得先注册登录哦，点击上面的按钮进去登录/注册页面</p>
    </div>
    <!-- 主模块 -->
    <div class="main">
        <!-- 查询选项模块 -->
        <form action="#" onsubmit="return false">
            <input type="text" name="nodeName" placeholder="笔记名" />
            <input type="text" name="author" placeholder="作者" />
            <input type="submit" value="搜索" />
            <p>SELECT BAR</p>
            <select name="popularity">
                <option value="none" selected disabled hidden>人气</option>
                <option value="10">10+</option>
                <option value="100">100+</option>
                <option value="1000">1000+</option>
            </select>
            <select name="year">
                <option value="none" selected disabled hidden>年</option>
                <option value="2000">2000+</option>
                <option value="2001">2001+</option>
                <option value="2002">2002+</option>
                <option value="2003">2003+</option>
                <option value="2004">2004+</option>
                <option value="2005">2005+</option>
                <option value="2006">2006+</option>
                <option value="2007">2007+</option>
                <option value="2008">2008+</option>
                <option value="2009">2009+</option>
                <option value="2009">2010+</option>
                <option value="2009">2011+</option>
                <option value="2009">2012+</option>
                <option value="2009">2013+</option>
                <option value="2009">2014+</option>
                <option value="2009">2015+</option>
                <option value="2009">2016+</option>
                <option value="2009">2017+</option>
                <option value="2009">2018+</option>
                <option value="2009">2019+</option>
                <option value="2009">2020+</option>
                <option value="2009">2021+</option>
                <option value="2009">2022+</option>
            </select>
            <select name="month">
                <option value="none" selected disabled hidden>月</option>
                <option value="1">1月+</option>
                <option value="2">2月+</option>
                <option value="3">3月+</option>
                <option value="4">4月+</option>
                <option value="5">5月+</option>
                <option value="6">6月+</option>
                <option value="7">7月+</option>
                <option value="8">8月+</option>
                <option value="9">9月+</option>
                <option value="10">10月+</option>
                <option value="11">11月+</option>
                <option value="12">12月+</option>
            </select>
            <select name="order">
                <option value="none" selected disabled hidden>排序</option>
                <option value="popularity">人气最高</option>
                <option value="later">时间最近</option>
            </select>
            <select name="class">
                <option value="none" selected disabled hidden>类别</option>
                <option value="Study">学习笔记类</option>
                <option value="Source">项目源码类</option>
                <option value="Bug">BUG解决类</option>
                <option value="Curriculum">课程系列类</option>
                <option value="Function">功能实现类</option>
                <option value="Other">其他</option>
            </select>
            <select name="language">
                <option value="none" selected disabled hidden>语言</option>
                <option value="Java">Java</option>
                <option value="Python">Python</option>
                <option value="HTML">HTML</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Go">Go</option>
                <option value="PHP">PHP</option>
                <option value="JSP">JSP</option>
                <option value="C">C</option>
                <option value="Css">CSS</option>
                <option value="Maven">Maven</option>
                <option value="SQL">SQL</option>
                <option value="MySQL">MySQL</option>
                <option value="Redis">Redis</option>
                <option value="Android">Android</option>
                <option value="XML">XML</option>
                <option value="Docker">Docker</option>
                <option value="Ruby">Ruby</option>
                <option value="Rust">Rust</option>
                <option value="Other">其他</option>
            </select>
        </form>
        <!-- 查询结果模块 -->
        <div class="result">
            <p>RESULT</p>
            <ul class="result_list" id="list">
                <li>
                    <h2>PROJECT NAME</h2>
                    <div id="class">学习笔记</div>
                    <div id="language">Java</div>
                    <div id="author">Bokey</div>
                    <div id="day">2022-6-6</div>
                    <div id="popularity"><span></span>500</div>
                    <p id="introduction">这里是对笔记的一些简介，介绍笔记的内容，请先登录才能看到其他笔记</p>
                </li>
                <!-- 其他li.... -->
            </ul>
        </div>
    </div>
</div>
</body>
<%--引入Jquery--%>
<script src="${pageContext.request.contextPath}/JS/jquery-1.11.3.min.js"></script>
<%--引入cookie工具--%>
<script src="${pageContext.request.contextPath}/JS/tool_cookie.js"></script>
<%--引入自己的JS代码--%>
<script src="${pageContext.request.contextPath}/JS/search_page.js"></script>
</html>